<template>
    <div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-if="swiperList.length>1" v-for="(item,index) in swiperList" :key="index">
                    <img :src="item.imgUrl">
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</template>

<script>
import Swiper from './swiper-bundle.min.js'
import axios from 'axios';
export default {
    name: 'VueProject01Newswiper',

    data() {
        return {
            swiperList:[],
        };
    },
    methods:{
        swiperInit(){
            
        }
    },
    mounted() {
        axios.get('https://apipc-xiaotuxian-front.itheima.net/home/banner').then((res)=>{
            if(res.data){
                this.swiperList=res.data.result
                // this.$nextTick(()=>{
                    new Swiper(".mySwiper", {
                        loop:true,
                        pagination: {
                            el: ".swiper-pagination",
                            // dynamicBullets: true,
                        },
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                        speed:1300,
                        autoplay:true
                        },
                    );
                // });
            }
        })
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
@import url('./swiper-bundle.min.css');
</style>